<template>
<!--  <h2>数据库接收</h2>-->
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <fileTrees @handleNodeClick="onTreeClick" :tableHeight="treeHeight"  :isnoClick="isnoClick" :menuId="menuId"></fileTrees>
      </el-col>
      <el-col :span="20" :xs="24" v-show="isShow">
        <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch"
                 label-width="68px">
          <el-form-item label="批次号" prop="batchNo">
            <el-input v-model="queryParams.batchNo" placeholder="请输入批次号" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search"  @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8" ref="refbut">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-upload2"  @click="handleImport()">DBF文件导入</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-upload2" v-show="subStr == 'V' && (categoryType == '1' || categoryType == '3')" @click="handleImportFile()">DBF文件导入卷内目录</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" border :data="dataList" :height="tableHeight">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" type="index" :index="table_index" width="55" align="center"/>
          <el-table-column label="批次号" align="center" prop="id"/>
          <el-table-column label="结果" prop="result" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="handleDetail(scope.row)" type="text">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-col>
      <el-col :span="20" :xs="24" v-show="!isShow" class="empty">
        <el-empty :image-size="200"></el-empty>
      </el-col>
    </el-row>

    <!-- 用户导入对话框 -->
    <dataImport :upload="upload" @uploadCancel="uploadCancelTap" :isShowTooltip="false"
                @uploadFile="uploadFile" @submitFileForm="submit"></dataImport>

    <!-- 导入匹配页 -->
    <importMatch :match="match" ref="matchRef" @matchCancel="matchCancelTap" @submitMatch="submitMatch"></importMatch>

    <!-- 查看详情 -->
    <el-dialog title="详情" :visible.sync="detailOpen" width="45%" append-to-body>
      <div class="detail">
        <ul ref="detailForm" :model="detailForm">
          <li><label>内容：</label><editor v-model="detailForm.msg" :min-height="192" style="width: 80%" :readOnly="true" /></li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import fileTrees from "@/components/fileTrees/index.vue"  //档案树
import treeHeight from "@/mixins/treeHeight";
import estimateTableHeight from "@/mixins/estimateTableHeight";
import {getLastIndexOf} from "@/utils";
import {getGroupTree} from "@/api/archive/archivesCategory";
import dataImport from "@/components/dataImportComponent/dataImport.vue";
import importMatch from "@/components/dataImportComponent/importMatch.vue";
import {getList, getTitle, uploadList} from "@/api/archive/digitalizeReceive/electronicArchives/databaseReception";

export default {
  name: "index",
  mixins: [ treeHeight, estimateTableHeight], // 混入方法
  components: { fileTrees, dataImport, importMatch },
  data() {
    return {
      menuId: '',
      isnoClick:true,
      loading: false,
      // 显示搜索条件
      showSearch: true,
      dataList: [], //表格列表
      isShow: false, //是否显示右侧数据
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: undefined
      },
      categoryType: '',
      subStr: '',
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
      },
      // 导入文件类型  件、卷、项目
      uploadType: null,
      // 表格表头
      xlsTitle: [],
      // 可导入项
      sysTitle: [],
      // 匹配参数
      match: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
      },
      // 详情页打开
      detailOpen: false,
      detailForm: {},
    }
  },
  created() {
    this.menuId = this.$route.meta.menuId
  },
  methods: {
    table_index(index){
      return (this.queryParams.pageNum-1) * this.queryParams.pageSize + index + 1;
    },
    onTreeClick(data) {
      this.isnoClick = false;
      this.treeRowData = data;

      if (data.categoryId != null) {
        this.isShow = true
      } else {
        this.isShow = false
      }
      if (this.$refs.queryForm != undefined) {
        this.$refs.queryForm.queryParams = {};
      }
      if (data.nodeType == null || data.nodeType == "t" || data.nodeType == "f") {
        this.isnoClick = true;
        return false;
      }
      this.loading = true;
      this.queryParams = data
      this.queryParams.sourceType = 1
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      if (this.queryParams.sub_table_name != undefined) {
        this.subStr = getLastIndexOf(this.queryParams.sub_table_name);
        let stb = this.queryParams.sub_table_name;
        let stbArr = stb.split("_");
        this.categoryType = stbArr[stbArr.length - 3];
      } else {
        this.getGroupTreePost(data.categoryId);
      }
      this.getList();
    },
    //档案门类树门类根据categoryID回显
    //档案门类树门类根据categoryID回显
    getGroupTreePost(ID) {
      getGroupTree(ID).then(response => {
        if (response.data.type == "0") { //件
          this.queryParams.sub_table_name = response.data.fileTableName;
        } else if (response.data.type == "1") { //卷
          this.queryParams.sub_table_name = response.data.folderTableName;
        } else { //项目
          this.queryParams.sub_table_name = response.data.itemTableName;
        }
        this.subStr = getLastIndexOf(this.queryParams.sub_table_name);
        let stb = this.queryParams.sub_table_name;
        let stbArr = stb.split("_");
        this.categoryType = stbArr[stbArr.length - 3];
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm("queryForm");
      this.getList()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      if (this.subStr == 'F') {
        this.queryParams.type = '0'
      } else if (this.subStr == 'V') {
        this.queryParams.type = '1'
      } else {
        this.queryParams.type = '3'
      }
      getList(this.queryParams).then(response=>{
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.isnoClick=true;
      })
    },
    handleImport() {
      if (this.subStr == "F") {
        // console.log("件导入")
        this.upload.title = "卷内件数据";
        this.upload.open = true;
        this.uploadType = 0
      } else if (this.subStr == 'V') {
        // console.log("项目导入")
        this.upload.title = "卷数据";
        this.upload.open = true;
        this.uploadType = 1
      } else {
        this.upload.title = "项目数据";
        this.upload.open = true;
        this.uploadType = 3
      }
    },
    handleImportFile() {
      this.upload.title = "卷内件数据";
      this.upload.open = true;
      this.uploadType = 0
    },
    // 关闭导入  /件/卷/项目
    uploadCancelTap() {
      this.upload.open = false;
      this.getList();
    },
    // 上传文件
    uploadFile(concent) {
      this.file = concent.file
      const formData = new FormData();
      formData.append("file", concent.file);
      formData.append("categoryId", this.queryParams.categoryId);
      formData.append("type", this.uploadType);
      getTitle(formData).then(response => {
        console.log(response.data)
        this.xlsTitle = response.data.xlsTitle.map(item => {
          return {
            xlsNum: item.num,
            xlsName: item.name
          }
        })
        this.sysTitle = response.data.sysTitle.map(item => {
          return {
            name: item.fieldName,
            caption: item.fieldCaption,
            showType: item.showType,
            dataLength: item.dataLength,
            isNoEmpty: item.isNoEmpty,
            defaultValue: item.defaultValue,
            checkChongfu: item.checkChongfu
          }
        })
        this.$nextTick(() => {   //此函数执行时所有的DOM挂载和渲染都已完成
          this.$refs.matchRef.init(this.xlsTitle, this.sysTitle);     //获取子组件中init方法并将父组件数据传递给子组件
        });
      })
    },

    // 点击确认
    submit() {
      // console.log("打开匹配页")
      this.upload.open = false
      this.match.open = true
      if (this.uploadType == 0) {
        this.match.title = "卷内件导入"
      } else if (this.uploadType == 1) {
        this.match.title = "案卷导入"
      } else {
        this.match.title = "项目导入"
      }
    },
    submitMatch(matchedData) {
      this.form = {
        categoryId: this.queryParams.categoryId,
        colNames: matchedData
      }
      if (this.subStr == "F") {
        this.form.type = this.uploadType
        this.form.folderId = "-1"
        // if (this.uploadType == 0) {
        //     this.form.type = this.uploadType
        //     this.form.folderId = "-1"
        // } else {
        //     this.form.type = this.uploadType
        // }
      } else if (this.subStr == "V") {
        if (this.uploadType == 0) {
          this.form.type = 0
          this.form.folderId = this.ids
        } else {
          this.form.type = this.uploadType
        }
      } else {
        if (this.uploadType == 1) {
          this.form.type = 1
          this.form.itemId = this.ids
        } else {
          this.form.type = this.uploadType
        }
      }
      const formData = new FormData();
      formData.append("file", this.file);
      formData.append("dataStr", JSON.stringify(this.form));
      uploadList(formData).then(response => {
        this.$modal.msgSuccess(response.msg);
        this.match.open = false;
        this.getList()
      }).catch(()=>{
        this.match.open = false;
        this.getList()
      })
    },
    matchCancelTap() {
      this.match.open = false;
    },

    handleDetail(row) {
      this.detailOpen = true
      this.$nextTick(() =>{
        this.detailForm = row
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  height: 250px;
  overflow: auto; /* 或者使用 overflow: scroll; */
  ul {
    padding: 0;
  }
  li {
    line-height: 50px;
    height: 50px;
    display: flex;
    font-size: 16px;
    color: #606266;
  }

  li>label {
    width: 100px;
    text-align: right;
    margin-right: 10px;
  }
}
</style>
